<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Plus, Delete, Edit, Upload, Search } from '@element-plus/icons-vue'
import { get, host, del } from '../js/http';
const props = defineProps({ projectId: String })
const keyword = ref('')
const setting = ref(false)
const router = useRouter();
const dataList = ref([])
const activeName = ref('')
const randomNum = ref(0);
const loading = ref(false)

const goGeneratePage = (routingId) => {
    router.push('/generate/' + props.projectId+'/'+routingId)
}

const getRoutingSetting = () => {
    loading.value = true;
    get('/routing/setting', { keyword: keyword.value, projectId: props.projectId }).then(res => {
        dataList.value = res.data;
        loading.value = false;
    })
}

const delRoutingSetting = (id) => {
    loading.value = true;
    ElMessageBox.confirm('确定删除该交路信息吗？','提示', {type: 'warning', confirmButtonText:'确定', cancelButtonText:'取消'}).then(()=>{
        del('/routing/setting',[id]).then(res=>{
            ElMessage({type:res.status?'success':'error', message: res.message});
            if(res.status){
                getRoutingSetting();
            }
            loading.value = false;
        })
    })
}


onMounted(() => {
    getRoutingSetting();
    randomNum.value = new Date().getTime()
})

</script>

<template>
    <div class="routing-setting" v-loading="loading">
        <div class="page" v-show="!setting">
            <div class="toolbar">
                <el-input v-model="keyword" @input="getRoutingSetting" clearable placeholder="关键字搜索" :prefix-icon="Search"
                    style="width: 300px;"></el-input>
                <el-button style="margin-left: 10px;" type="primary" @click="goGeneratePage(0)">新增交路</el-button>
            </div>
            <el-collapse v-model="activeName">
                <el-collapse-item v-for="(value, key) in dataList" :key="key" :name="key">
                    <template #title>
                        <div class="title">{{ key }}</div>
                    </template>
                    <div class="routeList">
                        <div v-for="item in value" class="routeItem">
                            <el-image style="width: 100%" :src="'http://10.2.1.197:8093/routing/setting/img/' + item.id+'?'+ randomNum"
                                :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                                :preview-src-list="['http://10.2.1.197:8093/routing/setting/img/' + item.id+'?'+ randomNum]"
                                :initial-index="4" fit="cover" />
                            <div class="footer">
                                <div class="footer-left">
                                    <span>更新时间：{{ item.createTime }}</span>
                                </div>
                                <div class="footer-right">
                                    <el-button type="info" size="small" @click="goGeneratePage(item.id)">编辑</el-button>
                                    <el-button type="danger" size="small" @click="delRoutingSetting(item.id)">删除</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>
<style scoped>
.routing-setting {
    padding: 10px;
    height: calc(100vh - 80px);
    background-color: var(--el-color-info-light-9);
}

.toolbar {
    margin-bottom: 10px;
}

.routeItem {
    border: 1px solid var(--el-menu-border-color);
    width: 30%;
    margin-left: 10px;
}

.title {
    font-weight: bold;
    font-size: 16px;
}

.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}
.routeList{
    display: flex;
    flex-wrap: wrap;
}
</style>